<template>
  <div class="dashboard-editor-container">
    <panel-group :xs="24" :sm="24" :lg="12"/>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <study-status/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <test-status/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <listening/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <senior-core/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">

import PanelGroup from './dashboard/PanelGroup.vue'
import studyStatus from './dashboard/studyStatus.vue'
import testStatus from './dashboard/testStatus.vue'
import listening from "@/views/dashboard/listening.vue";
import SeniorCore from "@/views/dashboard/seniorCore.vue";

</script>

<style scoped lang="scss">

.dashboard-editor-container {
  padding: 0.1rem 1rem;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 24px;
}

</style>

